<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 50%;
            margin: 0 auto;
        }

        .main-container {
            width: 50%;
            margin: 0 auto;
        }

        .first {
            padding-top: 10px;
            padding-bottom: 5px;
        }

        footer {
            color: white;
            background-color: black;
            position: fixed;
            right: 0;
            bottom: 0;
            text-align: center;
            width: 100%;
        }

        .child-info {
            display: flex;
            align-items: center;
        }

        .circle {
            width: 20px;
            height: 20px;
            background-color: {% block color %}{% endblock color %};
            border-radius: 50%;
            margin-right: 10px;
        }
    </style>
    <title>Мой сад.Родители</title>
</head>

<body>
    <header>
        <div class="header-content">
            <div class="child-info">
                <div class="circle"></div>
                <h1>{% block child_surname %}{% endblock child_surname %}</h1>
            </div>
            <a href="/accounts/logout">Выйти</a>
        </div>
    </header> 

    <main>
        <div class="main-container">
            <div class="first">
                <h2>Сейчас:</h2>
                <p>{% block child_action %}{% endblock child_action %}</p>
            </div>
            <div>
                <h2>Напоминания:</h2>
                <p>{% block mentors_remidner %}{% endblock mentors_remidner %}</p>
            </div>
        </div>
    </main>

    <footer>
        <p>Moi-sad@2024</p>
    </footer>
</body>

</html>